import QtQuick 2.0
import HappyXiaox.Native 1.0 as Native


Rectangle
{
    color :Native.Cpp.backgroundColor

    Component
    {
        id: delegate
        Column
        {
            id: wrapper
            z : wrapper.PathView.isCurrentItem ? 1 : 0;

            state : wrapper.PathView.isCurrentItem ? "SHOWN" : "HIDDEN";
            states: [
                State {
                    name: "HIDDEN"
                    PropertyChanges { target: itemId; color: "gray"}
                    PropertyChanges { target: wrapper; opacity: 0.5}
                    PropertyChanges { target: img; width: 40; height: 40}
                },
                State {
                    name: "SHOWN"
                    PropertyChanges { target: itemId; color: "red"}
                    PropertyChanges { target: wrapper; opacity: 1}
                    PropertyChanges { target: img; width: 140; height:140}
                }
            ]
            transitions: [
                Transition {
                NumberAnimation {
                    easing.type: Easing.InOutQuad; duration: 1000
                }
                ColorAnimation {
                    easing.type: Easing.InOutQuad; duration: 1000
                }
                PropertyAnimation { duration: 250; properties: "width, height"; easing.type: Easing.InOutQuad }
            }]

            Image
            {
                id :img
                source: display.imgsrc
            }
            Text
            {
                text: "商品名字：" + display.title
                anchors.horizontalCenter: img.horizontalCenter
                font.pointSize: 9
                width:itemId.width * 3 / 2
                color: itemId.color
                wrapMode: Text.WordWrap
            }
            Text
            {
                id : itemId
                text: "商品ID：" + display.id
                anchors.horizontalCenter: img.horizontalCenter
                font.pointSize: 9
            }
            Text
            {
                text: "店铺名：" + display.shop
                anchors.horizontalCenter: img.horizontalCenter
                font.pointSize: 9
                color: itemId.color
                opacity:itemId.opacity
            }
        }
    }
    PathView
    {
        anchors.fill: parent
        model: Native.Cpp.itemsModel
        delegate: delegate
        path: Path
        {
            startX: width * 1 / 2; startY: height * 0.59
            PathQuad
            {
                x: width * 1 / 2;
                y: height * 0.15;
                controlX: width * 1;
                controlY: height * 0.37;
            }
            PathQuad
            {
                x: width * 1 / 2;
                y: height * 0.59;
                controlX: 0;
                controlY: height * 0.37;
            }
        }
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()
    }

}

